<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:th="http://www.thymeleaf.org">
<head>
    <title>首页</title>
    <th:block th:include="import :: links"></th:block>
</head>
<body>
<header>
    <th:block th:include="import :: navigation"></th:block>
</header>
<section class="container" style="margin-top: 50px;">
    <div class="row" id="dataContent">
        <h2>我的项目</h2>
        <hr/>
        <div class="col-md-12">
            <div v-for="group in groups" class="panel panel-default col-md-3 box">
                <div class="panel-body">
                    <div class="box-content" v-on:click="openGroup(group.groupId)">
                        <h3>{{group.groupName}}</h3>
                        <p class="text-muted" v-if="group.groupDesc.length > 40">{{group.groupDesc.substr(0,40)}}...</p>
                        <p class="text-muted" v-else="">{{group.groupDesc}}</p>
                    </div>
                </div>
                <div class="panel-footer">
                    <div class="alert small text-right" role="alert">最后更新时间：<span>{{group.updateTs}}</span></div>
                </div>
            </div>
            <div  v-if="groups.length == 0" class="alert alert-info col-md-12" role="alert">
                <strong>您好!</strong> 你还没有任何团队
            </div>
        </div>
        <h2>我的工程</h2>
        <hr/>
        <div class="col-md-12">
            <div v-for="project in projects" class="panel panel-default col-md-3 box">
                <div class="panel-body">
                    <div class="box-content" v-on:click="openProject(project.appId)">
                        <h3>{{project.appName}}</h3>
                        <p class="text-muted" v-if="project.appDesc.length > 40">{{project.appDesc.substr(0,40)}}...</p>
                        <p class="text-muted" v-else="">{{project.appDesc}}</p>
                    </div>
                </div>
                <div class="panel-footer">
                    <div class="alert small text-right" role="alert">当前版本：<span>{{project.appProdVersion}}</span></div>
                </div>
            </div>
            <div v-if="projects.length == 0" class="alert alert-info col-md-12" role="alert">
                <strong>您好!</strong> 你还没有加入任何团队
            </div>
        </div>
    </div>
</section>
<footer id="footer"></footer>
<th:block th:include="import :: impJS"></th:block>
<script type="text/javascript">
    $(function () {
        var dataContent = new Vue({
            el: '#dataContent',
            data: {
                groups: [],
                projects: []
            },
            methods: {
                openGroup: function (id) {
                    window.location.href = "/group/" + id + ".html";
                },
                openProject: function (id) {
                    window.location.href = "/project/" + id + ".html";
                }
            },
            created: function () {
                var _this = this;
                $.getJSON("/indexData", {}, function (resp) {
                    if (resp.code != "0000") {
                        showMessage(resp.code || resp.desc, "error");
                    } else {
                        _this.groups = resp.data.groups;
                        _this.projects = resp.data.projects;
                    }
                })
            }
        });
    })
</script>
</body>
</html>